<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
    </ul>
    <ol>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
    </ol>
    <script>
        // 获取ul里面所有li
        // 以前 dom api获取的方法
        var ul = document.querySelector('ul')
        var lis = ul.querySelectorAll('li')
        // 1.子节点获取方法 parentNode.childNodes//获得的是所有子节点 包含元素节点 文本节点等等（空格 换行 文字属于文本节点）
        console.log(ul.childNodes);//返回的是所有子节点： 一共9个 4个li元素节点和5个换行text文本节点
        console.log(ul.childNodes[0].nodeType);//这里查询的是下标第0个子节点 返回的结果是3 所以是文本节点
        console.log(ul.childNodes[1].nodeType);//下标1返回的是1 所以是元素节点
        //  2.children 获取所有的子元素节点 只返回元素节点 其余不返回 也是常用的
        console.log(ul.children);
      
    </script>
</body>

</html>